<template>
    <div class="bigBox">
        <div class="box">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="属性名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="商品类型" prop="productAttributeCategoryId">
                    <el-select v-model="ruleForm.productAttributeCategoryId" placeholder="Activity zone">
                    </el-select>
                </el-form-item>
                <el-form-item label="分类筛选样式" prop="filterType">
                    <el-radio-group v-model="ruleForm.filterType">
                        <el-radio :label="0">普通</el-radio>
                        <el-radio :label="1">颜色</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="能否进行检索" prop="searchType">
                    <el-radio-group v-model="ruleForm.searchType">
                        <el-radio :label="0">不需要检索</el-radio>
                        <el-radio :label="1">关键字检索</el-radio>
                        <el-radio :label="2">范围检索</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品属性关联" prop="relatedStatus">
                    <el-radio-group v-model="ruleForm.relatedStatus">
                        <el-radio :label="0">是</el-radio>
                        <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性是否可选" prop="selectType">
                    <el-radio-group v-model="ruleForm.selectType">
                        <el-radio :label="0">唯一</el-radio>
                        <el-radio :label="1">单选</el-radio>
                        <el-radio :label="2">复选</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值的录入方式" prop="inputType">
                    <el-radio-group v-model="ruleForm.inputType">
                        <el-radio :label="0">手工录入</el-radio>
                        <el-radio :label="1">从下面列表中选择</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值可选值列表" prop="inputList">
                    <el-input v-model="ruleForm.inputList" />
                </el-form-item>
                <el-form-item label="是否支持手动新增" prop="handAddStatus">
                    <el-radio-group v-model="ruleForm.handAddStatus">
                        <el-radio :label="0">是</el-radio>
                        <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序属性" prop="sort">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
            </el-form>
            <div class="buttonBox">
                <el-button type="primary" @click="submit">提交</el-button>
                <!-- <el-button @click="reset">重置</el-button> -->
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import { productAttributeCreateAPI } from './api';

const route = useRoute()
const router = useRouter()
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    filterType: 0,  //分类筛选样式
    handAddStatus: 1, //是否支持手动新增
    inputList: '', //属性值可选值列表
    inputType: 0, //属性值的录入方式
    name: '', //属性名称
    productAttributeCategoryId: parseInt(route.query.cid as string), //商品类型
    relatedStatus: 1, //商品属性关联
    searchType: 0, //能否进行检索
    selectType: 0, //属性是否可选
    sort: 0, //排序属性
    type: parseInt(route.query.type as string),
})

// 修改请求
const submit = () => {
    ElMessageBox.confirm("是否提交该数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        productAttributeCreateAPI(ruleForm).then((res) => {
            if (res.code === 200) {
                setTimeout(() => {
                    router.back()
                }, 1000);
            }
        })
    })

}

//组件规则 
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入属性名称', trigger: 'blur' }
    ]
})


</script>
<style lang="less" scoped>
:deep(.el-input) {
    width: 610px;
}

:deep(.el-input--suffix) {
    width: 217px;
}

.bigBox {
    width: 100%;
    position: relative;

    .box {
        width: 800px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        white-space: nowrap;

        .buttonBox {
            margin-left: 115px;
        }
    }
}
</style>